<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Star Pattern</title>
<style>
.hse1{color: #2682f3;}
.hse2{color: #ea2929dd;}

    body {
        font-family: 'Courier New', Courier, monospace;
        font-size: 30px;
    }
    .container {
        width: max-content;
        margin: 0 auto;
        background-color: rgb(243, 255, 175);
        padding: 20px 100px;
        text-align: center;
    }
    .star-row {
        margin: 10px 0;
    }

</style>
</head>
<body>
<div class="container">
    <div class="star-row"><p class="hse1">*</div></p>
    <div class="star-row"><p class="hse1">***</div></p>
    <div class="star-row"><p class="hse1">*****</div></p>
    <div class="star-row"><p class="hse1">*******</div></p>
    <div class="star-row"><p class="hse1">*********</div></p>
    <div class="star-row"><p class="hse2">*********</div></p>
    <div class="star-row"><p class="hse2">*******</div></p>
    <div class="star-row"><p class="hse2">*****</div></p>
    <div class="star-row"><p class="hse2">***</div></p>
    <div class="star-row"><p class="hse2">*</div></p>
</div>
</body>
</html>